<template>
  <view class="index-page">
    <!-- 顶部轮播图 -->
    <view class="carousel-wrapper">
      <swiper class="carousel" circular indicator-dots autoplay interval="3000" duration="500">
        <swiper-item v-for="i in 3" :key="i">
          <image class="carousel-img" src="/src/static/avatar.png" mode="aspectFill" />
        </swiper-item>
      </swiper>
    </view>

    <!-- 选择区域 -->
    <view class="select-card-grid">
      <view class="select-grid">
        <picker mode="selector" :range="majors" @change="onMajorChange">
          <view class="select-grid-item">
            <uni-icons type="compose" size="28" color="#4A90E2"/>
            <text class="select-label">专业</text>
            <text class="select-value">{{ majors[selectedMajor] || '请选择' }}</text>
          </view>
        </picker>
        <picker mode="selector" :range="jobs" @change="onJobChange">
          <view class="select-grid-item">
            <uni-icons type="person" size="28" color="#4A90E2"/>
            <text class="select-label">职业</text>
            <text class="select-value">{{ jobs[selectedJob] || '请选择' }}</text>
          </view>
        </picker>
        <picker mode="region" @change="onCityChange">
          <view class="select-grid-item">
            <uni-icons type="location" size="28" color="#4A90E2"/>
            <text class="select-label">城市</text>
            <text class="select-value">{{ cityText }}</text>
          </view>
        </picker>
        <picker mode="selector" :range="degrees" @change="onDegreeChange">
          <view class="select-grid-item">
            <uni-icons type="medal" size="28" color="#4A90E2"/>
            <text class="select-label">学历</text>
            <text class="select-value">{{ degrees[selectedDegree] || '请选择' }}</text>
          </view>
        </picker>
        <picker mode="selector" :range="salaries" @change="onSalaryChange">
          <view class="select-grid-item">
            <uni-icons type="wallet" size="28" color="#4A90E2"/>
            <text class="select-label">薪资</text>
            <text class="select-value">{{ salaries[selectedSalary] || '请选择' }}</text>
          </view>
        </picker>
        <picker mode="selector" :range="experiences" @change="onExperienceChange">
          <view class="select-grid-item">
            <uni-icons type="calendar" size="28" color="#4A90E2"/>
            <text class="select-label">经验</text>
            <text class="select-value">{{ experiences[selectedExperience] || '请选择' }}</text>
          </view>
        </picker>
      </view>
      <button class="search-btn-grid">查找相关面试</button>
    </view>

    <!-- 面试学习资源列表 -->
    <view class="resource-section">
      <view class="resource-title">面试学习资源推荐</view>
      <scroll-view scroll-y class="resource-list">
        <view class="resource-card" v-for="(item, idx) in resources" :key="idx">
          <image class="resource-img" src="/src/static/avatar.png" mode="aspectFill" />
          <view class="resource-info">
            <view class="resource-name">{{ item.title }}</view>
            <view class="resource-desc">{{ item.desc }}</view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const majors = [
  '计算机科学与技术',
  '软件工程',
  '人工智能',
  '电子信息',
  '金融学',
  '工商管理',
  '法学',
  '其他'
];
const jobs = [
  '前端开发',
  '后端开发',
  '算法工程师',
  '产品经理',
  '测试工程师',
  '数据分析师',
  '运营',
  '其他'
];
const selectedMajor = ref(0);
const selectedJob = ref(0);
const selectedCity = ref<string[]>([]);
const cityText = ref('请选择城市');

const degrees = ['专科', '本科', '硕士', '博士'];
const salaries = ['5k-8k', '8k-12k', '12k-20k', '20k+'];
const experiences = ['应届生', '1-3年', '3-5年', '5年以上'];
const selectedDegree = ref(0);
const selectedSalary = ref(0);
const selectedExperience = ref(0);

const onMajorChange = (e: any) => {
  selectedMajor.value = e.detail.value;
};
const onJobChange = (e: any) => {
  selectedJob.value = e.detail.value;
};
const onCityChange = (e: any) => {
  selectedCity.value = e.detail.value;
  cityText.value = selectedCity.value.length ? selectedCity.value.join(' / ') : '请选择城市';
};
const onDegreeChange = (e: any) => {
  selectedDegree.value = e.detail.value;
};
const onSalaryChange = (e: any) => {
  selectedSalary.value = e.detail.value;
};
const onExperienceChange = (e: any) => {
  selectedExperience.value = e.detail.value;
};

const resources = [
  { title: '高频面试题精讲', desc: '覆盖各大互联网公司常见面试题，助你高效备战。' },
  { title: '算法与数据结构', desc: '系统梳理算法知识，提升编程能力。' },
  { title: '项目经验提升', desc: '精选真实项目案例，教你如何包装项目亮点。' },
  { title: '面试技巧与礼仪', desc: '掌握面试流程、沟通技巧与职场礼仪。' },
  { title: 'AI模拟面试', desc: '智能AI陪练，提前适应真实面试场景。' },
  { title: '简历优化指南', desc: '手把手教你打造高通过率简历。' }
];
</script>

<style scoped lang="scss">
@import '@/uni.scss';
.index-page {
  background: $uni-bg-color-grey;
  min-height: 100vh;
  padding-bottom: 40rpx;
}
.carousel-wrapper {
  margin: 0 32rpx;
  margin-top: 40rpx;
  border-radius: 24rpx;
  overflow: hidden;
  box-shadow: 0 8rpx 32rpx rgba(0,0,0,0.08);
}
.carousel {
  width: 100%;
  height: 320rpx;
}
.carousel-img {
  width: 100%;
  height: 320rpx;
  object-fit: cover;
  border-radius: 24rpx;
}
.select-card-grid {
  margin: 40rpx 32rpx 0 32rpx;
  background: #fff;
  border-radius: 24rpx;
  box-shadow: 0 4rpx 24rpx rgba(0,0,0,0.08);
  padding: 36rpx 28rpx 32rpx 28rpx;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.select-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 24rpx 18rpx;
}
.select-grid-item {
  background: $uni-bg-color-grey;
  border-radius: 18rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24rpx 0 18rpx 0;
  cursor: pointer;
  transition: box-shadow 0.2s, background 0.2s;
  &:active {
    box-shadow: 0 6rpx 24rpx rgba(0,122,255,0.10);
    background: #eaf3fc;
  }
}
.select-label {
  font-size: 24rpx;
  color: $uni-text-color-grey;
  margin: 8rpx 0 2rpx 0;
}
.select-value {
  font-size: 28rpx;
  color: $uni-color-primary;
  font-weight: 500;
  margin-top: 2rpx;
}
.search-btn-grid {
  margin-top: 32rpx;
  background: linear-gradient(90deg, #4A90E2 0%, #3578e5 100%);
  color: #fff;
  border-radius: 50rpx;
  font-size: 32rpx;
  font-weight: bold;
  padding: 18rpx 0;
  box-shadow: 0 4rpx 16rpx rgba(0,122,255,0.10);
  letter-spacing: 2rpx;
}
.resource-section {
  margin: 48rpx 32rpx 0 32rpx;
}
.resource-title {
  font-size: 34rpx;
  font-weight: bold;
  color: $uni-color-title;
  margin-bottom: 24rpx;
}
.resource-list {
  max-height: 600rpx;
  overflow-y: auto;
}
.resource-card {
  display: flex;
  align-items: flex-start;
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.05);
  margin-bottom: 24rpx;
  padding: 22rpx 20rpx;
  transition: box-shadow 0.2s;
  &:active {
    box-shadow: 0 6rpx 24rpx rgba(0,122,255,0.10);
  }
}
.resource-img {
  width: 100rpx;
  height: 100rpx;
  border-radius: 12rpx;
  object-fit: cover;
  margin-right: 20rpx;
}
.resource-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.resource-name {
  font-size: 30rpx;
  font-weight: 500;
  color: $uni-text-color;
  margin-bottom: 8rpx;
}
.resource-desc {
  font-size: 26rpx;
  color: $uni-text-color-grey;
}

</style>
